<template>
  <el-card class="container">
    <div class="search-box">
      <!-- :inline="true" 表单在一行显示 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model.trim="queryParams.wordName" placeholder="请输入词汇名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="queryParams.description" placeholder="请输入词汇描述" />
        </el-form-item>
        <el-form-item>
          <!-- 分类下拉框 v-model的值为当前被选中的el-option的 value 属性值 -->
          <el-select v-model="queryParams.subject" clearable placeholder="请选择学科">
            <el-option
              v-for="item in subjectList"
              :key="item.subjectId"
              :label="item.subjectName"
              :value="item.subjectName"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="queryParams.name" placeholder="请输入创建者姓名" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button v-allow="'content:word:create'" type="primary" icon="el-icon-plus" style="marginLeft:133px" @click="showDialog=true">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <div class="table-box">
      <el-table
        :data="wordList"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="id" label="词汇ID" align="center" width="100" />
        <el-table-column prop="wordName" label="词汇名称" align="center" />
        <el-table-column prop="description" label="词汇描述" align="center" />
        <el-table-column prop="subject" label="所属学科" align="center">
          <template #default="{row}">
            <el-tag>{{ row.subject }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="wordHot" label="词汇热度" align="center" width="100">
          <template #default="{row}">
            <el-tag>{{ row.wordHot+'%' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="创建者" align="center">
          <template #default="{row}">
            <el-tag>{{ row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button v-allow="'content:word:update'" type="primary" circle icon="el-icon-edit" @click="doEdit(row.id)" />
            <el-button v-allow="'content:word:delete'" type="danger" circle icon="el-icon-delete" @click="doDel(row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区域 -->
    <div class="pagination-box">
      <el-row type="flex" justify="end">
        <el-pagination
          background
          :current-page="queryParams.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryParams.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <!-- 新增和编辑弹出对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="showDialog" width="45%" @close="close">
      <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
        <el-form-item label="词汇名称" prop="wordName">
          <el-input v-model="formData.wordName" style="width:90%" placeholder="请输入词汇名称" />
        </el-form-item>
        <el-form-item label="创建者" prop="name">
          <el-input v-model="formData.name" style="width:90%" placeholder="请输入创建者" />
        </el-form-item>
        <el-form-item label="所属学科" prop="subject">
          <!-- 分类下拉框 v-model的值为当前被选中的el-option的 value 属性值 -->
          <!-- v-model绑定的值和value绑定的值必须是同种类型的，因为advimgpos是字符串所以此处将id转成字符串 -->
          <el-select v-model="formData.subject" clearable placeholder="请选择学科">
            <el-option
              v-for="item in subjectList"
              :key="item.subjectId"
              :label="item.subjectName"
              :value="item.subjectName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="热度" prop="wordHot">
          <el-input-number v-model="formData.wordHot" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="词汇描述" prop="description">
          <el-input v-model="formData.description" style="width:90%" type="textarea" placeholder="请输入词汇描述" :autosize="{ minRows: 2, maxRows: 4}" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { addWord, delWord, editWord, getSubjectList, getWordDetail, getWordList } from '@/api/content/word'
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        limit: 10,
        wordName: '',
        subject: '',
        description: '',
        name: ''
      },
      formData: {
        wordName: '',
        subject: '',
        description: '',
        name: '',
        wordHot: ''
      },
      rules: {
        wordName: [{ required: true, message: '请输入词汇名称', trigger: 'blur' }],
        subject: [{ required: true, message: '请选择所属学科', trigger: 'blur' }],
        description: [{ required: true, message: '请输入词汇描述', trigger: 'blur' }],
        name: [{ required: true, message: '请输入创建者', trigger: 'blur' }],
        wordHot: [{ required: true, message: '请输入热度', trigger: 'blur' }]
      },
      subjectList: [],
      wordList: [],
      total: 0,
      showDialog: false
    }
  },
  computed: {
    dialogTitle() {
      return this.formData.id ? '编辑词汇' : '添加词汇'
    }
  },
  created() {
    this.initSubjectList()
    this.initData()
  },
  methods: {
    // 渲染学科下拉框
    async  initSubjectList() {
      const res = await getSubjectList()
      this.subjectList = res.data.data.subJectArr
    },
    // 渲染表格数据
    async initData() {
      const res = await getWordList(this.queryParams)
      this.wordList = res.data.data.list
      this.total = res.data.data.total
    },
    // 条件查询
    search() {
      this.queryParams.page = 1
      this.initData()
    },
    // 切换每页显示数量
    handleSizeChange(value) {
      this.queryParams.limit = value
      this.queryParams.page = 1
      this.initData()
    },
    // 切换分页
    handleCurrentChange(value) {
      this.queryParams.page = value
      this.initData()
    },
    // 重置查询
    reset() {
      this.queryParams = {
        page: 1,
        limit: 10,
        wordName: '',
        subject: '',
        description: '',
        name: ''
      }
      this.initData()
    },
    async doEdit(id) {
      const res = await getWordDetail(id)
      this.formData = res.data.data
      this.showDialog = true
    },
    doDel(id) {
      this.$confirm('确认删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delWord(id)
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 处理删除最后一页最后一条数据
        if (this.wordList.length === 1 && this.queryParams.page > 1) {
          this.queryParams.page--
        }
        // 刷新表格
        this.initData()
      }).catch(() => {
        return false
      })
    },
    // 表单提交(新增和修改)
    submit() {
      this.$refs.form.validate(async(isOk) => {
        if (!isOk) return
        if (this.formData.id) {
          await editWord(this.formData)
          this.$message.success('编辑词汇成功！')
        } else {
          await addWord(this.formData)
          this.$message.success('添加词汇成功！')
        }
        this.initData()
        this.showDialog = false
      })
    },
    close() {
      this.formData = {
        wordName: '',
        subject: '',
        description: '',
        name: '',
        wordHot: ''
      }
      this.$refs.form.clearValidate()
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-box{
  margin-top: 20px;
}
</style>
